﻿@namespace MudBlazor.Charts
@using System.Globalization;
@inherits MudCategoryAxisChartBase

@{
    var style = _hoveredBar != null ? "overflow: visible;" : "";
}

<svg @ref="_elementReference" @attributes="UserAttributes" class="mud-chart-line mud-ltr" width="@MudChartParent?.Width" height="@MudChartParent?.Height" viewBox="0 0 @_boundWidth @_boundHeight" style="@style">
    <Filters />
    <g class="mud-charts-grid">
        <g class="mud-charts-gridlines-yaxis">
            @foreach (var horizontalLine in _horizontalLines)
            {
                <path stroke="#e0e0e0" stroke-width="0.3" d="@horizontalLine.Data"></path>
            }
        </g>
        @if (MudChartParent?.ChartOptions.XAxisLines == true)
        {
            <g class="mud-charts-gridlines-xaxis-lines">
                @foreach (var verticalLine in _verticalLines)
                {
                    <path stroke="gray" stroke-width="0.3" d="@verticalLine.Data"></path>
                }
            </g>
        }
    </g>
    <g @ref="_yAxisGroupElementReference" class="mud-charts-yaxis">
        @foreach (var horizontalLineValue in _horizontalValues)
        {
            @((MarkupString)$"<text x='{horizontalLineValue.X.ToString(CultureInfo.InvariantCulture)}' y='{horizontalLineValue.Y.ToString(CultureInfo.InvariantCulture)}' font-size='12px' text-anchor='end' dominant-baseline='auto'>{horizontalLineValue.Value?.ToString(CultureInfo.InvariantCulture)}</text>")
        }
    </g>
    <g @ref="_xAxisGroupElementReference" class="mud-charts-xaxis">
        @for (var i = 0; i < _verticalValues.Count; i++)
        {
            var verticalLineValue = _verticalValues[i];
            var x = verticalLineValue.X.ToString(CultureInfo.InvariantCulture);
            var y = verticalLineValue.Y.ToString(CultureInfo.InvariantCulture);
            var rotation = (-AxisChartOptions.XAxisLabelRotation).ToString(CultureInfo.InvariantCulture);
            @((MarkupString)$"<text x='{x}' y='{y}' font-size='12px' text-anchor='middle' dominant-baseline='middle' transform='rotate({rotation} {x} {y})'>{verticalLineValue.Value?.ToString(CultureInfo.InvariantCulture)}</text>")
        }
    </g>
    <g class="mud-charts-bar-series">
        @foreach (var bar in _bars)
        {
            var color = MudChartParent?.ChartOptions.ChartPalette.GetValue(bar.Index % MudChartParent.ChartOptions.ChartPalette.Length);

            <path class="mud-chart-bar"
                  @onclick="() => SelectedIndex = bar.Index" 
                  fill="@color"
                  stroke="@color"
                  stroke-width="@BarStroke" 
                  d="@bar.Data"
                  @onmouseover="(e) => OnBarMouseOver(e, bar)"
                  @onmouseout="OnBarMouseOut">
            </path>
        }
    </g>

    @MudChartParent?.CustomGraphics

    @* Render the tooltip as an SVG group when a bar is hovered *@
    @if (_hoveredBar is not null && MudChartParent?.ChartOptions.ShowToolTips == true)
    {
        var color = MudChartParent.ChartOptions.ChartPalette.GetValue(_hoveredBar.Index % MudChartParent.ChartOptions.ChartPalette.Length)?.ToString() ?? string.Empty;
        var series = _series[_hoveredBar.Index];

        if (!string.IsNullOrWhiteSpace(series.DataMarkerTooltipTitleFormat))
        {
            var tooltipTitle = series.DataMarkerTooltipTitleFormat
                .Replace("{{SERIES_NAME}}", series.Name)
                .Replace("{{X_VALUE}}", _hoveredBar.LabelXValue)
                .Replace("{{Y_VALUE}}", _hoveredBar.LabelYValue);

            var tooltipSubtitle = series.DataMarkerTooltipSubtitleFormat?
                .Replace("{{SERIES_NAME}}", series.Name)
                .Replace("{{X_VALUE}}", _hoveredBar.LabelXValue)
                .Replace("{{Y_VALUE}}", _hoveredBar.LabelYValue) ?? string.Empty;

            <ChartTooltip Title="@tooltipTitle" Subtitle="@tooltipSubtitle" Color="@color" X="_hoveredBar.LabelX" Y="_hoveredBar.LabelY" />
        }
    }
</svg>
<Legend Data="@_legends" />
